{% extends "base.html" %}

{% block content %}
<div class="row">
    <div class="col-12 mb-4">
        <div class="card">
            <div class="card-header">
                <h5 class="mb-0">各赛段配速分析</h5>
            </div>
            <div class="card-body">
                <div id="splitsBox"></div>
                <div class="mt-3">
                    <small class="text-muted">
                        说明：
                        <ul>
                            <li>10k: 起点至10公里</li>
                            <li>21k: 10公里至半程</li>
                            <li>30k: 半程至30公里</li>
                            <li>finish: 30公里至终点</li>
                        </ul>
                    </small>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-header">
                <h5 class="mb-0">配速分析说明</h5>
            </div>
            <div class="card-body">
                <p>本页面展示了马拉松比赛中不同赛段的配速分布情况：</p>
                <ul>
                    <li>箱线图中的盒子表示中间50%的选手的配速范围</li>
                    <li>盒子中的线表示该赛段的中位数配速</li>
                    <li>上下的须线表示配速的分布范围（不包括异常值）</li>
                    <li>点表示异常值，即与大多数选手配速差异较大的情况</li>
                </ul>
                <p>通过这个分析，我们可以：</p>
                <ul>
                    <li>了解选手在不同赛段的配速变化趋势</li>
                    <li>发现可能的体能消耗模式</li>
                    <li>识别最具挑战性的赛段</li>
                </ul>
            </div>
        </div>
    </div>
</div>

<script>
    var splitsBoxData = {{ splits_box | safe }};
    Plotly.newPlot('splitsBox', splitsBoxData.data, splitsBoxData.layout);
</script>
{% endblock %} 